<template>
  <div class="cropper">
    <el-dialog
      custom-class="cropper_dialog"
      :visible.sync="cropperData.cropperState"
      width="1000px"
      :show-close="false"
      :close-on-click-modal="false">
      <ImgCutter
        ref="imgCutterModal"
        label="选择本地图片"
        fileType="png"
        :crossOrigin="true"
        crossOriginHeader="*"
        rate="4:4"
        toolBgc="none"
        :isModal="false"
        :showChooseBtn="true"
        :lockScroll="true"
        :boxWidth="775"
        :boxHeight="458"
        :cutWidth="250"
        :cutHeight="250"
        :sizeChange="true"
        :moveAble="true"
        :imgMove="true"
        :originalGraph="false"
        WatermarkText=""
        WatermarkTextFont="12px Sans-serif"
        WatermarkTextColor="#00ff00"
        :WatermarkTextX="0.95"
        :WatermarkTextY="0.95"
        :smallToUpload="true"
        :saveCutPosition="false"
        :scaleAble="false"
        :previewMode="true"
        @cutDown="cutDown"
        @onClearAll="onClearAll"
        @onPrintImg="onPrintImg">
        <div class="btn btn-primary" slot="open">选择本地图片</div>
      </ImgCutter>

      <div class="preview" v-show="avatarUrl">
        <img class="preview_avatar" :src="avatarUrl">
        <div class="preview_tips">头像预览</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {Dialog,Message} from 'element-ui'
import ImgCutter from 'vue-img-cutter'
import {changeHeadImg,changeGroupHeadImg,uploadFile,friendsList,groupList} from '../../api/api'
export default {
  name:'cropper',
  data(){
      return {
        avatarUrl:'',
        imgSrc:''
      }
  },
  props:{
    cropperData:Object
  },
  components:{
    ImgCutter,
    'el-dialog':Dialog,
  },
  mounted(){
    
  },
  methods:{
    //点击确定
    cutDown(res) {
      console.log(res)
      var fd = new window.FormData()
      // 配置post请求的参数。参数名files,后面跟要传的文件，参数名fileSize，值为文件大小（看后端的具体要求）
      fd.append('fileSize', res.file.size)
      fd.append('ossKey', 'im')
      fd.append('files', res.file)
      uploadFile(fd)
      .then(res => {
        if(this.cropperData.type=="person"){
          let params = {
            userId:this.$store.state.user.id,
            headImg:res.data.data.path
          }
          changeHeadImg(params)
          .then(response => {
            
              this.$store.commit('setUserInfo',{headImg:res.data.data.path})
              this.onClearAll()

              let params1 = {
                  userId:this.$store.state.user.id
              }
              //重新加载好友列表
              friendsList(params1)
              .then(resp => {
                  this.$store.commit('getFriendsList',resp.data.data.list)
              })

              Message({
                message: '修改头像成功',
                type: 'success'
              });
          })
        }else if(this.cropperData.type=="group"){
          let params = {
            roomId:this.$store.state.choosedGroupId,
            roomImg:res.data.data.path
          }
          changeGroupHeadImg(params)
          .then(response => {
            this.$store.commit('changeGroupImg',res.data.data.path)
            this.onClearAll()

            let params1 = {
                pageNo:1,
                pageSize:500,
                masterId:this.$store.state.user.id
            }
            //加载群聊列表
            groupList(params1)
            .then(resp => {
                var list = resp.data.data.list
                this.$store.commit('getGroupList',list)
            })

            Message({
              message: '修改群头像成功',
              type: 'success'
            })
          })
        }
      })
      // this.imgSrc = res.dataURL
      this.onClearAll()
    },
    //点击取消
    onClearAll(){
      this.avatarUrl = ''
      this.$emit('cancelCropper',false)
    },
    onPrintImg(res){
      this.avatarUrl = res.dataURL
    }
  }
}
</script>

<style scoped>
.preview{
  position: absolute;
  top:130px;
  right: 36px;
}
.preview_avatar{
  width: 130px;
  background: black;
  display: block;
}
.preview_tips{
  margin-top:15px;
  font-size: 16px;
  color:#333;
  text-align: center;
}
</style>